<template>
	<view>
		<view class="" style="position: fixed;top: 30rpx;left: 30rpx;">
			{{isshuju}}
		</view>
		<!-- 商品 S-->
		<view class="shop" v-if="type == '商品'" v-for="(item, index) in list" :key="index" @click="checkThis(item,index)">
			<view class="shoptit flex flex_start">
				<view class="left-box  flex flex_center align_center">
					<uni-icons v-if="!item.chosed" type="circle" size="20" color="#999"></uni-icons>
					<!-- <uni-icons v-else type="circle-filled" size="20" color="#FFAF3C"></uni-icons> -->
					<image class="tp-img32" v-else src="../static/icon/this.png" mode=""></image>
				</view>
				<view class="shopimg tp-mr20">
					<image @click="pageJumps('/pagesShop/details/details' + '?cid=' + item.id)" :src="wwwImgUrl + item.pic" style="border-radius: 12rpx;" mode=""></image>
				</view>
				<view class="shopname">
					<view class="shopone ellispsis1">
						<text>{{item.name || ''}}</text>
					</view>
					<view class="shopprice">
						<text class="pricelei">¥</text>
						<text class="nowprice">{{item.price || ''}}</text>
						<text class="oldprice" v-if="item.discountPrice">¥ {{item.discountPrice || ''}}</text>
						<text class="paynum">销量{{item.sale || ''}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品 E-->
		<!-- 景区 S -->
		<view class="list-hang level_align tp-bgf" @click="checkThis(item)" v-if="type == '景区'" v-for="(item,index) in list"
		 :key="index">
			<view class="left-box  flex flex_center align_center">
				<uni-icons v-if="!item.chosed" type="circle" size="20" color="#999"></uni-icons>
				<!-- <uni-icons v-else type="circle-filled" size="20" color="#FFAF3C"></uni-icons> -->
				<image class="tp-img32" v-else src="../static/icon/this.png" mode=""></image>
			</view>
			<image @click="pageJumps('/pagesSecond/scenic/scenicDetail' + '?id=' + item.jqId)" class="hang-img tp-mr20 tp-br12"
			 :src="wwwImgUrl + item.jqCover" mode=""></image>
			<view class="hang-right flex flex_column flex-1">
				<view class="tp-fz28 tp-fc333 ellispsis1">
					{{item.jqName || ''}}
				</view>
				<view class="level_align flex_between tp-mt20">
					<text class="tp-fc999">{{item.sales || ''}}人已买 | 距您{{item.distance || ''}}km</text>
					<!-- <text class="tp-fc999">距您5km</text> -->
				</view>
				<view class="level_align tp-mt20">
					<text class="ellispsis1 flex-1">
						<!-- {{item.hotelLocation || ''}} -->{{item.jqIntro || ''}}</text>
				</view>
				<view class="level_align flex_between tp-mt20">
					<view class="tp-fz24 tp-red tp-fw600">
						￥<text class="tp-fz36">{{item.currentPrice || ''}}</text>起
					</view>
					<text class="huang-color">{{item.jqScore || ''}}分</text>
				</view>
			</view>
		</view>
		<view class="height">

		</view>
		<!-- 景区 E -->
		<!-- 酒店 S -->
		<view class="list-hang  level_align tp-bgf" v-if="type == '酒店'" v-for="(item,index) in list" :key="index" @click="checkThis(item)">
			<view class="left-box  flex flex_center align_center">
				<uni-icons v-if="!item.chosed" type="circle" size="20" color="#999"></uni-icons>
				<!-- <uni-icons v-else type="circle-filled" size="20" color="#FFAF3C"></uni-icons> -->
				<image class="tp-img32" v-else src="../static/icon/this.png" mode=""></image>
			</view>
			<image @click.stop="pageJumps('/pagesSecond/hotel/hotelDetail' + '?id=' + item.hotelId)" class="hang-img tp-mr20 tp-br12"
			 :src="wwwImgUrl + item.hotelCover" mode=""></image>
			<view class="hang-right flex flex_column flex-1">
				<view class="tp-fz28 tp-fc333 ellispsis1">
					{{item.hotelName || ''}}
				</view>
				<view class="level_align flex_between tp-mt20">
					<text class="huang-color"><text v-if="item.hotelLevel" style="margin-right: 5rpx;">{{item.hotelLevel ||''}} | </text>{{item.hotelScore || ''}}分</text>
					<text class="tp-fc999">距您{{item.distance || ''}}km</text>
				</view>
				<view class="level_align tp-mt20">
					<image class="tp-img28 tp-mr15" src="../static/icon/position1.png" mode=""></image>
					<text class="ellispsis1 flex-1">{{item.hotelLocation || ''}}</text>
				</view>
				<view class="level_align flex_between tp-mt20">
					<text class="ellispsis1 tp-fc tp-mr20"><text v-for="(ite,ind) in item.salePoints" :key="ind">{{'#' +ite}} </text></text>
					<view class="tp-fz24 tp-red tp-fw600">
						￥<text class="tp-fz36">{{item.hotelPrice || ''}}</text>起
					</view>
				</view>
			</view>
		</view>
		<!-- 酒店 E -->
		<!-- 底部栏 S -->
		<view class=" tp-mt20">
			<view class="tp-h98"></view>
			<view class="tp-h98 tp-btn-h100 tp-ptb0lr30 tp-bgf level_align flex_between">
				<view class="level_align tp-h100 tp-fc333 tp-fz28" @click="checkAll">
					<uni-icons v-if="quanxuantype==0" class="tp-mr20" type="circle" size="20" color="#999"></uni-icons>
					<uni-icons v-else class="tp-mr20" type="circle-filled" size="20" color="#FFAF3C"></uni-icons>
					<text>全部</text>
				</view>
				<view class="level_align" @click="queding">
					<view class="queding tp-ptb0lr40 tp-h56 center_combo  tp-br12 tp-fcF ">
						确认
					</view>
				</view>
			</view>
		</view>
		<!-- 底部栏 E -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '', //关键字
				type: '', //类型
				list: [], //页面商品列表
				isshuju:'',//是否有数据
				checkArr: [], // 仓库返回被选的景区
				jiudiancheckArr: [], // 仓库返回被选的酒店
				shopcheckArr: [], // 仓库返回被选的商品
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				quanxuantype: 0, //全选样式的变化1全选0没有
			};
		},
		onLoad(opt) {
			this.type = opt.that
			this.value = opt.tit
			this.getlist()
		},
		onShow() {
			
			//是不是全选了
			let type = this.list.every(function(item) {
				return item.chosed
			})
			if (type == true) {
				this.quanxuantype = 1
			} else {
				this.quanxuantype = 0
			}
			this.checkArr = this.$store.getters.getJingqulist
			this.jiudiancheckArr = this.$store.getters.getJiudianlist
			this.shopcheckArr = this.$store.getters.getShoplist
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.list = []
			this.loadMoreText = "加载中..."
			this.getlist()
		},
		// 上拉触底
		onReachBottom() {
			if (this.pageNum < this.last_page) {
				this.showLoadMore = true;
				this.pageNum++
				this.getlist()
			} else {
				this.loadMoreText = "已没有更多数据!"
			}
		},
		methods: {
			// 多选
			checkThis(item, index) {
				item.chosed = !item.chosed
				//是不是全选了
				let type = this.list.every(function(item) {
					return item.chosed
				})
				if (type == true) {
					this.quanxuantype = 1
				} else {
					this.quanxuantype = 0
				}
			},
			// 全选 全不选
			checkAll() {
				// this.cunlist=''
				let type = this.list.every(function(item) {
					return item.chosed
				})
				if (type == true) {

					this.list.forEach(item => {
						item.chosed = false
						this.quanxuantype = 0
					})

				} else {
					this.list.forEach(item => {
						item.chosed = true
						this.quanxuantype = 1
					})
				}
			},
			queding() {
				if (this.type == '景区') {
					if (this.checkArr == '') {
						this.checkArr = []
					}
					this.list.forEach(item => {
						if (item.chosed) {
							this.checkArr.push(item)
						}
					})
					console.log(this.checkArr)
					for (let i = 0; i < this.checkArr.length; i++) {
						for (let j = i + 1; j < this.checkArr.length; j++) {
							if (this.checkArr[i].jqId === this.checkArr[j].jqId) {
								this.checkArr.splice(j, 1)
								j = j - 1;
							}
						}
					}
					this.$store.commit('upJingqulist', this.checkArr)
					  uni.navigateBack({
						delta: 2
					}) 
				}
				if (this.type == '酒店') {
					if (this.jiudiancheckArr == '') {
						this.jiudiancheckArr = []
					}
					this.list.forEach(item => {
						if (item.chosed == true) {
							this.jiudiancheckArr.push(item)
						}
					})
					for (let i = 0; i < this.jiudiancheckArr.length; i++) {
						for (let j = i + 1; j < this.jiudiancheckArr.length; j++) {
							if (this.jiudiancheckArr[i].hotelId === this.jiudiancheckArr[j].hotelId) {
								this.jiudiancheckArr.splice(j, 1)
								j = j - 1;
							}
						}
					}
						console.log(this.jiudiancheckArr)
					this.$store.commit('upJiudianlist', this.jiudiancheckArr)
					uni.navigateBack({
						delta: 2
					})
				}
				if (this.type == '商品') {
					if (this.shopcheckArr == '') {
						this.shopcheckArr = []
					}
					this.list.forEach(item => {
						if (item.chosed == true) {
							this.shopcheckArr.push(item)
						}
					})
					for (let i = 0; i < this.shopcheckArr.length; i++) {
						for (let j = i + 1; j < this.shopcheckArr.length; j++) {
							if (this.shopcheckArr[i].id === this.shopcheckArr[j].id) {
								this.shopcheckArr.splice(j, 1)
								j = j - 1;
							}
						}
					}
					this.$store.commit('upShoplist', this.shopcheckArr)
					uni.navigateBack({
						delta: 2
					})
				}
			},
			//获取列表
			getlist() {
				if (this.type == '商品') {
					/* let params = {
						keyword: this.value,
						categoryId: '',
					} */
					this.$http.get("/front/product/getProductByKeyword?keyword=" + this.value).then(res => {
						uni.stopPullDownRefresh();
						if (res.code == 200) {
							res.data.result.map(item => {
								item.chosed = false
							})
							if (this.shopcheckArr.length > 0) {
								res.data.result.forEach(item => {
									this.shopcheckArr.forEach(it => {
										if (item.id == it.id) { //注意id是不是对的
											item.chosed = true
										}
									})
								})
							}
							if (this.pageNum > 1) {
								this.list = this.list.concat(res.data.result);
							} else {
								this.list = res.data.result
							}
							if(this.list == ''){
								this.isshuju = '暂无匹配商品'
							}
						}
						//是不是全选了
						let type = this.list.every(function(item) {
							return item.chosed //如果list的每一项的chosed值都是true,变量type就为true
						})

						if (type == true) { //然后再去做判断
							this.quanxuantype = 1
						} else {
							this.quanxuantype = 0
						}
					})
				}
				if (this.type == '酒店') {
					let param = {
						/* hotelType: 0,
						hotelLevel: '',
						distance: '',
						locationSearchId: '',
						maxPrice: '',
						minPrice: '', */
						keyWords: this.value,
					/* 	city: '',
						salePoints: [] */
					}
					this.$http.post(this.$api.hotelIndex + '?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize, param).then(res => {
						uni.stopPullDownRefresh();
						if (res.code === 200) {
							this.last_page = res.data.pageTotal
							res.data.result.map(item => {
								item.chosed = false
							})
							if (this.jiudiancheckArr.length > 0) {
								res.data.result.forEach(item => {
									this.jiudiancheckArr.forEach(it => {
										if (item.hotelId == it.hotelId) {
											item.chosed = true
										}
									})
								})
							}
							if (this.pageNum > 1) {
								this.list = this.list.concat(res.data.result);
							} else {
								this.list = res.data.result
							}
						}
						//是不是全选了
						let type = this.list.every(function(item) {
							return item.chosed //如果list的每一项的chosed值都是true,变量type就为true
						})

						if (type == true) { //然后再去做判断
							this.quanxuantype = 1
						} else {
							this.quanxuantype = 0
						}
					})

				}
				if (this.type == '景区') {
					let param = {
						jqSeason: '',
						keyWords: this.value,
						city: '郑州市',
						jqTypes: [],
						orderBy: '',
					}
					this.$http.post(this.$api.scenicIndex + '?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize, param).then(res => {
						uni.stopPullDownRefresh();
						if (res.code == 200) {
							this.last_page = res.data.pageTotal
							res.data.result.map(item => {
								item.chosed = false
							})
							if (this.checkArr.length > 0) {
								res.data.result.forEach((item, index) => {
									this.checkArr.forEach(it => {
										if (item.jqId == it.jqId) {
											item.chosed = true
										}
									})
								})
							}
							if (this.pageNum > 1) {
								this.list = this.list.concat(res.data.result);
							} else {
								this.list = res.data.result
							}

						}
						//是不是全选了
						let type = this.list.every(function(item) {
							return item.chosed //如果list的每一项的chosed值都是true,变量type就为true
						})

						if (type == true) { //然后再去做判断
							this.quanxuantype = 1
						} else {
							this.quanxuantype = 0
						}
					})

				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.left-box {
		width: 80rpx;
		padding-bottom: 20rpx;
	}

	.hang-img {
		width: 248rpx;
		height: 208rpx;
	}

	.hang-right {
		height: 208rpx;
	}

	.huang-color {
		color: #FFAF3C;
	}

	.list-kuai {
		width: 50%;

		.kuai-img {
			width: 335rpx;
			height: 280rpx;
			border-radius: 12rpx 12rpx 0px 0px;
		}
	}

	/* 商品 S*/
	.shop {
		width: 100%;
		height: 180rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding-top: 20rpx;

		.shoptit {
			width: 100%;

			.shopimg {
				width: 140rpx;
				height: 140rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				float: left;
			}

			.shopname {
				float: left;
				width: 276rpx;
				margin: 22rpx 0 20rpx 0rpx;

				.shopone {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}

				.shopprice {
					width: 510rpx;

					.pricelei {
						font-size: 24rpx;
						font-weight: bold;
						color: #FF4A37;
						line-height: 42px;
						margin-right: 5rpx;
					}

					.nowprice {
						font-size: 36rpx;
						font-weight: bold;
						color: #FF4A37;
						line-height: 42rpx;
						margin-right: 10rpx;
					}

					.oldprice {
						font-size: 24rpx;
						font-weight: 500;
						text-decoration: line-through;
						color: #999999;
						line-height: 42rpx;

					}

					.paynum {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 25rpx;
						margin-right: 30rpx;
						float: right;
					}
				}
			}
		}

	}

	/* 商品 S*/
	// 确认
	.queding {
		height: 54rpx;
		background: #FF4A37;
		border-radius: 27rpx;

	}

	.list-hang {
		padding: 30rpx 30rpx 30rpx 0;
		box-sizing: border-box;
	}
</style>
